package com.example.practiceone

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.practiceone.ui.theme.PracticeOneTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PracticeOneTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
//                    OneImage()
//                    Two()
                    Three()
                }
            }
        }
    }
}

@Composable
fun OneImage() {
    Column {
        Image(
            painter = painterResource(id = R.drawable.bg_compose_background),
            contentDescription = "title image"
        )
        OneTitle(message = stringResource(id = R.string.one_title))
        OneText(
            message = stringResource(id = R.string.one_message1),
            modifier = Modifier.padding(start = 16.dp, end = 16.dp)
        )
        OneText(
            message = stringResource(id = R.string.one_message2),
            modifier = Modifier.padding(16.dp)
        )
    }
}

@Composable
fun OneTitle(message: String) {
    Text(
        text = message,
        fontSize = 24.sp,
        modifier = Modifier.padding(16.dp)
    )
}

@Composable
fun OneText(message: String, modifier: Modifier) {
    Text(
        text = message,
        fontSize = 16.sp,
        textAlign = TextAlign.Justify,
        modifier = modifier
    )
}

@Composable
fun Two() {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = R.drawable.ic_task_completed),
            contentDescription = "task completed"
        )
        Text(
            text = "All tasks completed",
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(top = 24.dp, bottom = 8.dp)
        )
        Text(
            text = "Nice Work!",
            fontSize = 16.sp,
        )
    }
}

/*
 * Modifier.weight(1f)的作用：设置宽度或高度的比例
 * 只能在Column或Row内部设置
 */
@Composable
fun Three() {
    Column (
        modifier = Modifier.fillMaxWidth()
    ) {
        Row (modifier = Modifier.weight(1f)) {
            Card(title = "Text composable", message = "Displays text and follows the recommended Material Design guidelines.", bgColor = Color(0xFFEADDFF), modifier = Modifier.weight(1f))
            Card(title = "Image composable", message = "Creates a composable that lays out and draws a given Painter class object.", bgColor = Color(0xFFD0BCFF), modifier = Modifier.weight(1f))
        }
        Row (modifier = Modifier.weight(1f)) {
            Card(title = "Row composable", message = "A layout composable that places its children in a horizontal sequence.", bgColor = Color(0xFFB69DF8), modifier = Modifier.weight(1f))
            Card(title = "Column composable", message = "A layout composable that places its children in a vertical sequence.", bgColor = Color(0xFFF6EDFF), modifier = Modifier.weight(1f))
        }
    }
}

@Composable
fun Card(title: String, message: String, bgColor: Color, modifier: Modifier = Modifier) {
    Column (
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier.fillMaxSize().background(color = bgColor).padding(16.dp)
    ) {
        Text(
            text = title,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.padding(bottom = 16.dp)
        )
        Text(
            text = message,
            textAlign = TextAlign.Justify,
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    PracticeOneTheme {
        OneImage()
    }
}